<template>
  <div class="PageItem" v-if="dialogVisible">
    <el-dialog
      title="寄存格位"
      v-dialogDrag
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose"
    >
      <el-row>
        <span style="float: right; margin-right: 65px; margin-bottom: 10px">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="determine">确 定</el-button>
        </span>
        <el-col :span="6" style="height: 100%">
          <el-tree
            ref="organizationtree"
            :data="treeData"
            node-key="id"
            :props="defaultProps"
            @node-click="handleClick"
            :default-expanded-keys="[1]"
          >
          </el-tree>
        </el-col>
        <el-col :span="18" style="height: 500px; overflow: auto">
          <div class="wrapper" v-if="wakeHalls.length > 0">
            <div class="box-card" v-for="(n, m) in wakeHalls" :key="m">
              <div
                :class="n.depositCaseState ? 'item sale' : 'item free'"
                :style="n.flag ? 'background-color:lightgreen' : ''"
                @click.stop="mournSelect(n, m)"
              >
                <h2>格位编号：{{ n.depositCaseNo }}</h2>
                <h2>逝者姓名：{{ n.deadName }}</h2>
                <h2>节点名称：{{ n.positionName }}</h2>

              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
// import { dataFormate } from "@/utils/index";
import * as Type from "@/api/service";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
    },
    Changeofposition: {
      type: Boolean,
    },
  },
  components: {},
  data() {
    return {
      dialogVisibles: this.dialogVisible,
      treeInfoLoad: [],
      treeData: [],
      data: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      wakeHalls: [],
      selectname: "",
    };
  },
  watch: {
    dialogVisible(val) {
      if (val === true) {
        this.getTreedata();
      }
    },
  },
  methods: {
    handleClose(done) {
      this.dialogVisibles = false;
      this.$emit("update:dialogVisible", this.dialogVisibles);
      this.wakeHalls = [];
    },
    handleClick(data, checked, node) {
      console.log(data, 1);
      console.log(checked, 2);
      console.log(node, 3);
      if (checked.level === 4 && data.typeCode === 3) {
        this.$refs.organizationtree.setCheckedNodes([data]);
        // console.log(this.$refs.organizationtree.getCheckedNodes()[0], 555);
        this.data = this.$refs.organizationtree.getCheckedNodes();
        //获取列表数据
        this.loadOrganizationListWithParentIdData(
          this.data[this.data.length - 1]
        );
      }
    },
    mournSelect(item, index) {
      //在弹出选择礼厅对话框中选择
      let this_select = this;
      if (item.depositCaseState && this.Changeofposition) {
        this.$message("格位被占用,请选择其他");
        return;
      }

      for (let j = 0; j < this.wakeHalls.length; j++) {
        this.wakeHalls[j].flag = false;
      }
      console.log(this.wakeHalls[index].flag);
      this.wakeHalls[index].flag = !this.wakeHalls[index].flag;
      this.$set(this.wakeHalls, index, this.wakeHalls[index]);
      this.selectname = this.wakeHalls[index];

      console.log(this.selectname);
    },
    determine() {
      this.dialogVisibles = false;
      this.$emit("update:dialogVisible", this.dialogVisibles);
      this.$emit("input", this.selectname);
      this.wakeHalls = [];
    },
    getTreedata() {
      Type["loadDepositCaseTreeList"]({})
        .then((response) => {
          const { data } = response;
          if (!data) {
            this.$message("加载数据失败");
            return;
          }

          let node = {
            id: 0,
            label: "寄存管理",
            children: [],
          };

          this.treeInfoLoad = data;
          node = this.getChildren(node, this.treeInfoLoad);
          let treeArray = new Array();
          treeArray.push(node);
          this.treeData = treeArray;
        })
        .catch((error) => {
          this.$message(error);
        });
    },
    getChildren(node, data) {
      let this_get = this;
      let child = new Array();
      if (this_get.checkIsNode(node, data)) {
        if (data && data.length) {
          data.forEach((item) => {
            if (node.id == item.parentId && item.name) {
              let nodeItem = {
                id: item.id,
                label: item.name,
                typeCode: item.typeCode,
              };
              if (this_get.checkIsNode(nodeItem, data)) {
                if (!nodeItem.children) {
                  nodeItem.children = new Array();
                }
                nodeItem.children.push(this_get.getChildren(nodeItem, data));
              }
              child.push(nodeItem);
            }
          });
          node.children = child;
          return node;
        }
      } else {
        return node;
      }
    },
    checkIsNode(node, data) {
      let flag = false;
      if (data && data.length && data.length > 0) {
        for (let i = 0; i < data.length; i++) {
          if (node.id == data[i].parentId) {
            flag = true;
            return flag;
          }
        }
      }
      return flag;
    },
    loadOrganizationListWithParentIdData({ id, typeCode }) {
      let IdData = {
        id,
        typeCode,
      };
      Type["loadDepositCaseCaseTreeId"](IdData).then((response) => {
        const { data } = response;
        if (!data) {
          this.$message("数据读取失败");
          return;
        }
        this.wakeHalls = data;
        // this.tableData = data;
        // this.EmployeeList = data;
      });
    },
  },
};
</script>

<style scoped>
.el-dialog__headerbtn .el-dialog__close {
  color: #fff !important;
}

.box-card {
  flex: 0 0 200px;
  display: inline-block;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  margin-right: 10px;
}

.box-card .item {
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  width: 100%;
  height: 90px;
  text-align: left;
  padding: 0 1em;
  border-radius: 5px;
  overflow: hidden;
}

.item:hover {
  cursor: pointer;
}

.item:last-child {
  margin-bottom: 0px;
}

.item.sale {
  background-color: #ff6040;
}

.item.free {
  background: white;
  border: 0.5px solid #ccc;
}

.item.repair {
  background: yellow;
}

.item.selected {
  background: lightgreen !important;
}

.item h2 {
  height: 30px;
  overflow: hidden;
}
/* 弹框文字白色 */
.PageItem /deep/ .el-dialog__title,
.PageItem /deep/.el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
</style>
